<template>
	<view class="content">
		<view class="itemType">
			<image :src="dataItem.type==0?'/static/cardType.png':'/static/cardType2.png'" class="cardType"
				mode="widthFix"></image>
			<view class="txt" :style="{color:dataItem.type==0?'#fff':'#000'}">
				{{dataItem.type==0?'扭蛋':'直购'}}
			</view>
		</view>
		<view class="contentImg">
			<view class="contentLeft"
			@click="itemUlr">
				<!-- @click="linkUrl(`/pages/gashaponMachine/gashaponMachine?shopId=${dataItem.shop_id}&machineId=${dataItem.id}`)"> -->

				<image lazy-load class="imgBox" :src="dataItem.showlist[0]|completeUrl" mode="aspectFit"></image>
				<view class="hotBox">
					<image src="/static/index/hotIcon.png" mode="aspectFit"></image>
					<view class="hotNum">
						168011111
					</view>
				</view>
				<view class="introduction">
					<view class="txt2">
						{{dataItem.name||''}}
						<!-- 【全职高手】刺绣鼠标垫是多大撒大声地 -->
					</view>

				</view>
			</view>
			<view class="contentRight">
				<image lazy-load v-for="(item,index) in dataItem.showlist" v-if="index!=0" :key="index"
					:src="item|completeUrl" mode="aspectFit"
					@click="itemUlr">
					<!-- @click="linkUrl(`/pages/gashaponMachine/gashaponMachine?shopId=${dataItem.shop_id}&machineId=${dataItem.id}`)"> -->
				</image>
			</view>
		</view>
		<view class="shopLay">
			<view class="shopLeft" v-if="!hasTitleSlot"
				@click="linkUrl('/pages/index/storeDetails?shopId='+dataItem.shop_id)">
				<image lazy-load :src="dataItem.shop_avatar" mode="aspectFit"></image>
				<view class="name">
					{{dataItem.shop_name||''}}
				</view>
				<uni-icons class="icons" type="right" color="#5A5A5A" size="12"></uni-icons>
			</view>
			<slot name="titletxt"></slot>
			<view class="shopRight">
				<text class="unit">￥</text>
				<view class="number">
					{{dataItem.frontend_price}}{{dataItem.type==0?'/抽':''}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			// 检测插槽是否被使用
			hasTitleSlot() {
				return !!this.$slots.titletxt;
			},
		},
		name: "pictureDisplayTow",
		props: {
			dataItem: {
				type: Object,
				default: () => {
					return {}
				}
			},
		},
		data() {
			return {
				linkUrl(url) {
					uni.navigateTo({
						url
					})
				},
				itemUlr(){
					// {{dataItem.type==0?'扭蛋':'直购'}}
					if(this.dataItem.type==0){
						this.linkUrl(`/pages/gashaponMachine/gashaponMachine?shopId=${this.dataItem.shop_id}&machineId=${this.dataItem.id}`);
					}else{
						this.linkUrl(`/pages/Self-purchasedMachine/Self-purchasedMachine?shopId=${this.dataItem.shop_id}&machineId=${this.dataItem.id}`);
					}
				}
			};
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #fff;
		border-radius: 46upx;
		padding: 12upx 14upx 12upx;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.18);
		position: relative;

		.itemType {
			position: absolute;
			z-index: 1;
			right: 0;
			top: -26upx;

			.cardType {
				@include setwh(108upx, 0);
			}

			.txt {
				@include positionCenter;
				font-weight: bold;
				font-size: 26rpx;
				color: #000000;
				line-height: 38rpx;
				text-align: center;
				white-space: nowrap;
			}
		}

		.contentImg {
			position: relative;
			@include flexLayout(center, space-between);

			.contentLeft {
				position: relative;
				width: 344upx;

				.imgBox {
					border-radius: 30upx;
					width: 100%;
					height: 340upx;
					background-color: #F3F3F3;
				}

				.hotBox {
					position: absolute;
					top: 0;
					left: 0;
					// width: 109rpx;
					padding: 0 14upx 0 20upx;
					height: 58rpx;
					background: rgba(255, 255, 255, 0.7);
					border-radius: 0rpx 0rpx 15rpx 0rpx;
					@include flexLayout(center);

					image {
						@include setwh(18upx, 26upx);
						margin-right: 8upx;
					}

					.hotNum {
						font-family: AlimamaFangYuanTiVF;
						font-weight: bold;
						font-size: 20rpx;
						color: #C50000;
						line-height: 24rpx;
					}
				}

				.introduction {
					@include flexLayout(center, center);
					@include positionCenter();
					// justify-content: space-between;
					top: 288upx;
					width: 91%; //268rpx;
					height: 64rpx;
					background: rgba(255, 255, 255, 0.93);
					border-radius: 20rpx;

					.txt2 {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 18rpx;
						color: #000000;
						// line-height: 32rpx;
						@include lineOver();
						@include setwh(86%)
					}

				}
			}

			.contentRight {
				width: 318upx;
				height: 340upx;
				@include flexLayout(flex-start, space-between);
				// align-items: flex-start;
				flex-wrap: wrap;

				image {
					@include setwh(156upx, 156upx);
					border-radius: 30upx;
					background-color: #F3F3F3;
				}
			}
		}

		.shopLay {
			@include flexLayout(center, space-between);
			padding: 20upx 60upx 20upx 20upx;

			.shopLeft {
				@include flexLayout(center);
				// min-width: 224rpx;
				// height: 52rpx;
				padding: 6upx 20upx 6upx 8upx;
				background: #F8F8F8;
				border-radius: 27rpx;
				border: 2rpx solid #E2E2E2;

				image {
					@include setwh(40upx, 40upx);
					border-radius: 50%;
					margin-right: 20upx;
					background-color: #F3F3F3;
				}

				.name {
					max-width: 200upx;
					font-family: STHeitiSC;
					font-weight: 500;
					font-size: 24rpx;
					color: #5A5A5A;
					margin-right: 16upx;
					@include lineOver();
				}

				.icons {
					line-height: 24rpx;
				}
			}

			.shopRight {
				@include flexLayout(flex-end);
				color: #F1516D;
				font-size: 32rpx;
				font-family: SourceHanSansSC;
				font-weight: 800;
				line-height: 1;

				.unit {
					font-size: 24rpx;
				}
			}
		}
	}
</style>